<template>
    <div class="dialog" v-show="isAble">
        <div class="dialog-wrap">
            <div class="dialog-header">
                <slot name="header"></slot>
                <button class="dialog-header-close" @click="!isAble" title="关闭">X</button>
            </div>
            <div class="dialog-body">
                <slot></slot>
            </div>
            <div class="dialog-footer">
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Dialog",
        data(){
            return {
                isAble:false
            }
        }

    }
</script>

<style lang="less" scoped>
    .dialog{ 
        //最外层
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background-color: rgba(135, 200, 50, 0.69);
        
    }
    .dialog-wrap{ 
        position:absolute;
        left:50%;
        top:50%;
        width:460px;
        height:230px;
        padding:12px;
        transform: translate(-50%,-50%);
        background: #afc;
        .dialog-header{
            display: flex;
            justify-content: space-between;
            margin:30px,0,20px,0;
            font-size: 20px;

        }
        .dialog-body{
            
            font-size: 18px;
            slot{
                margin:50px,auto;
            }
        }
    }
</style>